<template>
  <div>
    <el-container>
      <el-header style="background: ;">
        <div class="sm_box">
          <div class="sm_white">
            <div class="sm_wire"></div>
            <span class="sm_staff">场景2</span>
          </div>
          <el-badge :value="12" class="item">
            <el-button style="color:#259BFF;" size="small">刷新</el-button>
          </el-badge>
        </div>
      </el-header>
      <el-main class="main">
        <div class="header_text" v-for="(item,index) in list" :key="index">{{item.text}}</div>
      </el-main>
    </el-container>

    <el-container>
      <el-header class="header_el">
        <div class="el-icon-caret-top" v-for="(item,index) in issue" :key="index">
          {{item.text}}
          <span class="oper">{{item.operation}}</span>
        </div>
      </el-header>
      <el-main class="elMain" style="line-height:0;display:flex;padding:0;background:white;">
        <div class="box">
          <span class="box_text">参考答案</span>
        </div>
        <div class="elmain">
            <span class="el-icon-s-opportunity"></span>
          <span class="elmain_text">发布参考答案</span>
        </div>
      </el-main>
        <el-main style="background:white;border-bottom: 2px #E6E9EC solid;">
          <div class="mains" v-for="(item,index) in text" :key="index">
          {{item.indus}}
        </div>
       </el-main>
        <div class="user-box">
          <div class="user1">
            <div class="user-icon"><i class="el-icon-delete"></i></div>
            <div class="user-info">
              <div class="info">
                张三 <el-tag>已发布</el-tag>
              </div>
              <div>
                2021
              </div>
            </div>
          </div>
          <div class="icon">
            <el-button type="small"><i class="el-icon-delete"></i>补充点评</el-button>
          </div>
        </div>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          text:
            "2016年5月26日-29日起宜昌市遭受强降雨，夷陵区部分乡镇发生洪涝灾害，太平溪镇受灾严重，逾40余户群众房屋倒塌，近200余间房屋严重受损，区政府组织转移安置受灾群众，在地势相对较高的某中学设置灾民集中安置点，大约500名受灾严重的群众接受集中安置。"
        }
      ],
      issue: [
        {
          text:
            "问题2: 暴雨引发洪涝灾害发生期间,宜昌市卫生计生部门应开展哪些应急措施?",
          operation: "实操"
        }
      ],
      text: [
        {
          indus: "1、整治水源,保证饮用水卫生安全"
        },
        {
          indus: "2、加强再去食源性疾病监测工作"
        },
        {
          indus: "3、开展群众性爱国卫生运动，广泛进行健康教育的基础上，动员广大群众，搞好环境卫生，组织专人指导群众，及时清理、处理垃圾、人畜粪便和动物尸体。"
        },
        {
          indus: "4、利用一切可以利用的宣传手段和传播媒介，做好群众的卫生防病宣传教育和动员工作。"
        },
        {
          indus: "5、在卫生应急响应终止后，继续加强灾区传染病和突发事件的监测工作。"
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.sm_box {
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  flex-wrap: wrap;
  .sm_white {
    display: flex;
    align-items: center;
    display: flex;
    .sm_wire {
      width: 4px;
      height: 16px;
      background: #259bff;
      margin-left: 5px;
    }
    .sm_staff {
      width: 84px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #313d47;
    }
  }
  .item {
    line-height: 5px;

  }
}

.main {
  padding: 0;
  display: flex;
  text-indent: 28px;
  letter-spacing: -0.2px;
  .header_text {
    display: flex;
    flex-wrap: wrap;
    line-height: 20px;
    background: #d3dce6;
    text-align: justify;
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify;
    margin-bottom: 20px;
  }
}
.header_el {
  display: flex;
  background: white !important;
  border-bottom: 2px solid #e6e9ec;

  .oper {
    width: 48px;
    height: 16px;
    background: #67c23a;
    border-radius: 9px;
    margin-left: 10px;
  }
}
.elMain{
    display: flex;
    align-items: center;
    justify-content: space-between;
.box {
  width: 70px;
  height: 24px;
  background: #d3ebff;
  border-radius: 0px 100px 100px 0px;
  line-height: 26px;
  .box_text {
    width: 48px;
    height: 17px;
    font-size: 12px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #259bff;
    line-height: 17px;
  }
}
.elmain {
  width: 115px;
  height: 30px;
  background: #ffffff;
  border-radius: 2px;
  border: 1px solid #259bff;
  margin-top: 5px;
  .elmain_text {
    width: 72px;
    height: 17px;
    font-size: 12px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #259bff;
    line-height: 29px;
  }
}
}
.mains{
  line-height: 20px!important;
justify-content: flex-start;
text-align: left;
background: white;
}
.main_Box{

}
.user-box {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  .user1 {
    // display: inline-block;
    display: flex;
    align-items: center;
    // width: 200px;
    // flex-direction: row;
  }
}
.el-icon-caret-top {
  line-height: 60px;
}
.el-header,
.el-footer {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {


  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
